Skip to content

perf(dashboard): lazy-load below-fold dashboard widgets to reduce initial bundle (#966)#984

Open
harshitanagpal05 wants to merge 6 commits into
Priyanshu-byte-coder:mainfrom
harshitanagpal05:feat/lazy-load-dashboard-widgets-966
Open

perf(dashboard): lazy-load below-fold dashboard widgets to reduce initial bundle (#966)#984
harshitanagpal05 wants to merge 6 commits into
Priyanshu-byte-coder:mainfrom
harshitanagpal05:feat/lazy-load-dashboard-widgets-966

Conversation

@harshitanagpal05
Copy link
Copy Markdown
Contributor

@harshitanagpal05 harshitanagpal05 commented May 24, 2026

Summary

Lazy-load chart-heavy and below-the-fold dashboard widgets to reduce the initial JavaScript payload and improve First Contentful Paint (FCP) and Time-to-Interactive (TTI).

This PR replaces eager loading of Recharts-based dashboard widgets with dynamic imports using next/dynamic and lightweight skeleton fallbacks to improve perceived performance and Lighthouse scores.

Why

The dashboard currently loads multiple chart-heavy components eagerly, adding unnecessary JavaScript to the initial bundle even when users never scroll to those sections.

By loading these widgets only when needed:

  • Initial JS download size is reduced
  • Dashboard renders faster
  • Perceived responsiveness improves
  • Lighthouse performance scores improve

What Changed

  • Replaced eager imports with:
    next/dynamic(..., { ssr: false, loading: () => <SkeletonCard /> })
  • Added skeleton fallback components to preserve layout stability during loading
  • Kept critical above-the-fold dashboard UI server-rendered and unchanged

Widgets Lazy-Loaded

  • CodingActivityInsightsCard
  • FriendComparison
  • ActivityRingChart
  • ContributionGraph
  • ContributionHeatmap
  • PRMetrics
  • PRBreakdownChart
  • CommitTimeChart
  • PRReviewTrendChart

Implementation Notes

  • Uses next/dynamic with ssr: false so Recharts code is loaded only in the browser
  • Skeleton fallbacks match widget dimensions to prevent layout shift
  • Non-breaking change — existing dashboard functionality remains unchanged

Files Changed

  • page.tsx

How to Test

  1. Start the development server

  2. Visit:
    http://localhost:3000/dashboard

  3. Verify:

    • Header/goals/summary render immediately
    • Chart widgets lazy-load as you scroll
    • Skeletons appear briefly without layout jumps

Validation

  • Lazy-loading implementation completed
  • Skeleton fallbacks added
  • Runtime layout-shift verification recommended
  • Lighthouse before/after comparison recommended

Notes

npm run type-check currently reports unrelated missing type declarations for:

  • @vercel/analytics/next
  • @vercel/speed-insights/next

These are pre-existing environment/type issues and are unrelated to this PR’s lazy-loading changes.

Closes #966

@vercel
Copy link
Copy Markdown

vercel Bot commented May 24, 2026

@harshitanagpal05 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) type:security GSSoC type bonus: security (+20 pts) labels May 24, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 24, 2026

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@Priyanshu-byte-coder Priyanshu-byte-coder added the gssoc:approved GSSoC: PR approved for scoring label May 24, 2026
@Priyanshu-byte-coder Priyanshu-byte-coder mentioned this pull request May 24, 2026
Open
Priyanshu-byte-coder
Priyanshu-byte-coder reviewed May 24, 2026
View reviewed changes
Copy link
Copy Markdown
Owner

@Priyanshu-byte-coder Priyanshu-byte-coder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good performance improvement! Note:

This PR touches the same files as #978 (globals.css, page.tsx, layout.tsx, DashboardHeader.tsx). These will conflict on merge. Please rebase on latest main once the merge order is decided. Also, the globals.css changes (61 additions) appear unrelated to lazy-loading — consider splitting those into a separate PR or explaining the connection.

@Priyanshu-byte-coder Priyanshu-byte-coder added the level:intermediate GSSoC: Intermediate difficulty (35 pts) label May 24, 2026
@github-actions github-actions Bot added the type:testing GSSoC type bonus: tests (+10 pts) label May 25, 2026
@harshitanagpal05
Copy link
Copy Markdown
Contributor Author

harshitanagpal05 commented May 25, 2026

Hi @Priyanshu-byte-coder, I’ve rebased the branch, resolved the conflicts, and cleaned up the unrelated globals.css changes
All checks are passing now. Could you please review the updated PR whenever you get a chance?

@harshitanagpal05 harshitanagpal05 force-pushed the feat/lazy-load-dashboard-widgets-966 branch from ed98332 to b98db6c Compare May 25, 2026 08:49
@Priyanshu-byte-coder
Copy link
Copy Markdown
Owner

Priyanshu-byte-coder commented May 25, 2026

Hi! This PR has a merge conflict with main. Please rebase onto the latest main branch (git fetch origin && git rebase origin/main) and resolve conflicts, then force-push. The feature itself looks great — lazy-loading below-fold widgets is a real performance win!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Priyanshu-byte-coder Priyanshu-byte-coder Priyanshu-byte-coder left review comments

Assignees

@harshitanagpal05 harshitanagpal05

Labels

gssoc:approved GSSoC: PR approved for scoring gssoc26 GSSoC 2026 contribution level:intermediate GSSoC: Intermediate difficulty (35 pts) type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) type:security GSSoC type bonus: security (+20 pts) type:testing GSSoC type bonus: tests (+10 pts)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[PERF] Lazy load below-fold dashboard cards to improve initial load time

2 participants

@harshitanagpal05 @Priyanshu-byte-coder